<!--代码逻辑和样式库-->
<script src="./create-user.component.js"></script>
<style src="./create-user.scss" scoped lang="scss"></style>

<template>
  <div>
    <el-dialog :visible.sync="showDialog" width="1300px" @close="closeDialog()">
      <span slot="title">
        <span class="aq-text-weight-bolder">用户信息管理</span>
        <i class="aq-margin-left-12 aq-margin-right-12 el-icon-arrow-right"></i>
        {{ title }}
      </span>
      <el-form ref="dataForm" :rules="editRules" :model="editForm" label-position="top" label-width="120px">
        <el-row class="aq-padding-left-32 aq-padding-right-32" :gutter="20" type="flex">
          <el-col :span="5">
            <el-form-item prop="userName">
              <div><span class="aq-text-color-danger">*</span>用户编号<span class="aq-search-text">请根据规则填写用户编号</span></div>
              <el-input v-model="editForm.userName" placeholder="请输入用户编号" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="trueName">
              <div><span class="aq-text-color-danger">*</span>用户名称<span class="aq-search-text">用户名称不可为空</span></div>
              <el-input v-model="editForm.trueName" placeholder="请输入用户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="mobileNumber">
              <div><span class="aq-text-color-danger">*</span>手机号码</div>
              <el-input v-model="editForm.mobileNumber" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="roleObj">
              <div><span class="aq-text-color-danger">*</span>用户职位</div>
              <el-select v-model="editForm.roleObj" value-key="objectId" suffix-icon="el-icon-arrow-down" multiple filterable remote reserve-keyword placeholder="请选择用户职位" :remote-method="remoteMethod" @focus="remoteMethod('')" @change="validateRole">
                <el-option v-for="item in roles" :key="item.objectId" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="aq-vertical-middle">
            <div class="aq-vertical-middle">
              <span class="aq-text-color-danger">*</span>帐号状态
              <el-switch class="aq-margin-left-16" v-model="editForm.isEnable" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </div>
          </el-col>
        </el-row>
        <el-row class="aq-padding-left-32 aq-padding-right-32" :gutter="20" type="flex">
          <el-col :span="5" class="aq-vertical-middle">
            <div class="aq-vertical-middle">
              <span class="aq-text-color-danger">*</span>用户性别
              <el-radio class="aq-margin-left-16" v-model="editForm.sex" label="男">男</el-radio>
              <el-radio v-model="editForm.sex" label="女">女</el-radio>
            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item prop="structId">
              <div><span class="aq-text-color-danger">*</span>所属组织<span class="aq-search-text">所选组织与部门编码相关联；页面空白处点击“回车”键进行搜索</span></div>
              <el-cascader ref="cascades" class="aq-width-full" separator="-" size="medium" v-model="editForm.structId" :options="structs" :props="defaultProps" @change="chooseStruct" placeholder="请选择所属组织"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="aq-vertical-middle">——</el-col>
          <el-col :span="5">
            <el-form-item prop="structCode">
              <div><span class="aq-text-color-danger">*</span>部门编码</div>
              <el-input v-model="editForm.structCode" @blur="searchStruct" placeholder="请输入部门编码" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="enumStatus">
              <div><span class="aq-text-color-danger">*</span>用户状态</div>
              <el-select v-model="editForm.enumStatus" suffix-icon="el-icon-arrow-down" placeholder="请选择用户状态">
                <el-option v-for="item in status" :key="item.itemValue" :label="item.itemName" :value="item.itemValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="band"></div>
        <el-row class="aq-padding-top-16 aq-padding-left-32 aq-padding-right-32">
          <el-col :span="24">
            <el-form-item prop="remark">
              <div>用户备注</div>
              <el-input v-model="editForm.remark" placeholder="若需要填写备注请在此处填写" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="code">
              <div>用户头像<span class="aq-search-text">可上传员工头像，支持.jpg/.png格式，图片质量不超过300K</span></div>
              <el-upload class="avatar-uploader" :action="file_url+'/file/uploadWithCompress'" :data="{fileSize:300}" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
                <img v-if="editForm.headImgUrl" :src="file_url + editForm.headImgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <i v-if="editForm.headImgUrl" @click="handleAvatarRemove()" class="el-icon-delete avatar-delete-icon"></i>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">提交数据</el-button>
      </span>
    </el-dialog>
  </div>
</template>
